---
import Layout from "../../layouts/Layout.astro";
import { getCollection } from "astro:content";
import { LinearGradient } from '@qwik/components/text';
import { BackgroundVideo } from "@qwik/components/video";


const allPosts = await getCollection("posts");
const announcements = allPosts.filter(post => post.data.tags?.includes('announcements'));
const caseStudies = allPosts.filter(post => post.data.tags?.includes('case-studies'));
const blogPosts = allPosts.filter(post => post.data.tags?.includes('blog-posts'));

const pageTitle = "NativeLink Resources | Blog, Case Studies, Changelog";
---

<Layout title={pageTitle}>
  <div class=" w-screen h-auto text-white text-4xl bg-black flex flex-col justify-center items-center">
    <div class="relative w-full h-[50svh] flex flex-col justify-center items-start">
      <BackgroundVideo class="absolute inset-0 w-full h-full object-cover" />
      <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-blue-500 opacity-50"></div>
      <div class="absolute inset-0 w-full h-full bg-gradient-to-b from-transparent via-black/50 to-black"></div>

      <LinearGradient text="Resources" class="z-10 text-thin text-5xl self-start pl-8 md:pl-48 py-8"/>
    </div>

    <LinearGradient text="Books & Publications" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8"/>

    <div class="relative w-screen px-8 md:px-0 md:w-9/12 flex gap-4 pb-16 mb-6">
      <a
        href="/resources/oreilly-bazel-book"
        class="h-96 w-full md:w-96 shrink-0 flex flex-col justify-evenly rounded-xl items-center border border-solid border-white bg-gradient-to-br from-purple-900/20 to-blue-900/20 hover:from-purple-900/30 hover:to-blue-900/30 transition-colors"
      >
        <div class="text-8xl">📘</div>
        <div class="w-full h-full flex flex-col justify-between items-start p-6">
          <LinearGradient text="Extending Bazel to Its Full Potential" class="text-2xl w-full" />
          <p class="text-sm text-gray-300 mb-4">Leveraging Cloud and Parallelization to Ship Reliable Code Faster</p>
          <span class="text-lg">Download Now →</span>
        </div>
      </a>
    </div>

    <LinearGradient text="Case Studies" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8" />

    <div id="Card" class="relative w-screen px-8 md:px-2 md:w-9/12 flex gap-4 snap-x snap-mandatory overflow-x-auto pb-16 mb-6 ">
      {caseStudies
        .sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
        .map((post) => (
          <a
            href={"/resources/blog/" + post.id}
            class="h-96 w-11/12 md:w-72 shrink-0 flex flex-col snap-always md:justify-evenly justify-start rounded-xl items-center border border-solid border-white snap-center"
          >
            {post.data.image && (
              <img src={post.data.image} alt={post.data.title || "Blog post image"} class="w-full h-48 object-contain rounded-t-xl" />
            )}
            <div class="w-full h-full flex flex-col justify-between items-start p-6">
              <LinearGradient text={post.data.title} class="text-lg w-full" />
              <span class="text-lg">Read More</span>
            </div>
          </a>
        ))}
    </div>

    <LinearGradient text="Blog Posts" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8"/>

    <div id="Card" class="relative w-screen px-8 md:px-0 md:w-9/12 flex gap-4 snap-x snap-mandatory overflow-x-auto pb-16 mb-6 ">
      {blogPosts
        .sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
        .map((post) => (
          <a
            href={"/resources/blog/" + post.id}
            class="h-96 w-11/12 md:w-72 shrink-0 flex flex-col snap-always md:justify-evenly justify-start rounded-xl items-center border border-solid border-white snap-center"
          >
            {post.data.image && (
              <img src={post.data.image} alt={post.data.title || "Blog post image"} class="w-full h-48 object-cover rounded-t-xl" />
            )}
            <div class="w-full h-full flex flex-col justify-between items-start p-6">
              <LinearGradient text={post.data.title} class="text-lg w-full" />
              <span class="text-lg">Read More</span>
            </div>
          </a>
        ))}
    </div>

    <LinearGradient text="Announcements" class="text-thin text-4xl self-start pl-8 md:pl-48 py-8"/>

    <div class="text-sm flex justify-start w-full md:w-9/12 px-8 md:px-0">An awesome talk of one of TraceMachina's leading engineers Aaron Mondal</div>
    <div class="flex justify-start w-full md:w-9/12 px-8 md:px-0 flex justify-center items-center pt-4 pb-12">
      <div class="w-full max-w-4xl aspect-video">
        <iframe
          title="Hermetic Toolchain Creation with Local Remote Execution (LRE) & Nix - Aaron Mondal, NativeLink"
          class="w-full h-full"
          src="https://www.youtube-nocookie.com/embed/uokjTev8myk?rel=0"
          referrerpolicy="strict-origin-when-cross-origin"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
        ></iframe>
      </div>
    </div>

    <div id="Card" class="relative w-screen px-8 md:px-0 md:w-9/12 flex gap-4 snap-x snap-mandatory overflow-x-auto pb-16 mb-6 ">
      {announcements
        .sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
        .map((post) => (
          <a
            href={"/resources/blog/" + post.id}
            class="h-96 w-11/12 md:w-72 shrink-0 flex flex-col snap-always md:justify-evenly justify-start rounded-xl items-center border border-solid border-white snap-center"
          >
            {post.data.image && (
              <img src={post.data.image} alt={post.data.title || "Blog post image"} class="w-full h-48 object-cover rounded-t-xl" />
            )}
            <div class="w-full h-full flex flex-col justify-between items-start p-6">
              <LinearGradient text={post.data.title} class="text-lg w-full" />
              <span class="text-lg">Read More</span>
            </div>
          </a>
        ))}
    </div>

    <div class="w-full pb-12 h-auto flex justify-center items-center">
      <a class="w-36 h-10 bg-white flex justify-center items-center rounded-xl border border-solid border-white" href="/resources/blog">
        <button type="button" class="text-sm! md:text-md text-black">
        Go to Blog
        </button>
      </a>
    </div>

  </div>
</Layout>
